<template>
  <div class="wrapper">
    <v-tab :currentIndex="currentIndex" @checckIndex="checckIndex"></v-tab>
    <div v-if="selectedCom">
      <!-- 样式 -->
      <div v-if="currentIndex===0">
        <div class="style_item" v-for="(item,index) in selectedCom.attribute" :key="index">
          <span class="label">{{item.name}}</span>
          <input v-if="item.type === 'input'" type="text" v-model="item.value" @blur="updateComponent">
          <input v-if="item.type === 'color'" type="color" v-model="item.value" @change="updateComponent">
        </div>
      </div>
      <!-- 数据 -->
      <div v-if="currentIndex===1">
        <textarea class="com_data" v-model="data2string" @change="updateComponent" />
      </div>
    </div>
    <div v-else>当前没有可编辑组件</div>
  </div>
</template>

<script>
import VTab from '@/views/components/v-tab.vue'
import getComponent from '@/templates'
import { mountComponent } from '@/utils'
export default {
  name: 'VEditor',
  components: {
    VTab
  },
  props: {
    selectedCom: {
      type: Object
    }
  },
  data() {
    return {
      currentIndex: 0,
      data2string: ''
    }
  },
  methods: {
    // v-tab回调
    checckIndex(i) {
      this.currentIndex = i
    },
    // 更新组件
    updateComponent() {
      console.log(this.data2string);
      // 获取组件的数据 使用处理器更新
      let component = getComponent(this.selectedCom.info, this.selectedCom.attribute, this.data2string)
      // 设置组件位置
      component.position = this.selectedCom.position
      // 设置info
      // component.info = this.selectedCom.info
      // component.data = this.selectedCom.data
      // 重新挂载组件
      console.log('updateCom', component);
      this.$emit('updateCom', component)
      mountComponent(component)
    },

  },
  watch: {
    selectedCom: {
      deep: true,
      handler(val) {
        if (!val) return
        console.log('selectedCo', this.selectedCom);
        this.data2string = JSON.stringify(val.data)
      }
    }
  },
  created() { },
  mounted() { }
}
</script>

<style lang="less" scoped>
.wrapper {
  width: 350px;
  .style_item {
    margin: 10px 10px;
    .label {
      display: inline-block;
      width: 120px;
    }
  }
  .com_data {
    min-height: 300px;
    margin: 15px;
    width: 90%;
  }
}
</style>